<template>
  <div class="course-page">
    <h4>视频播放</h4>
    <div class="player-demo">
      <div class="player-content">
        <polyv-player :vid="vid"></polyv-player>
      </div>
      <div class="player-content">
        <video-player>
          <!-- <aliyun-player></aliyun-player> -->
        </video-player>
      </div>

    </div>

    <br />
    <el-button @click="changeVid">更换视频</el-button>
  </div>
</template>

<script>
export default {
  name: 'appVideo',
  data() {
    return {
      playerName: 'aliyun',
      vid: '812a792458a374b3e4b1dbdcd0604f8a_8', // '812a792458dacfcc5a8b5eaed19507f5_8',
      indexNum: 1,
      dataList: [
        '812a792458dacfcc5a8b5eaed19507f5_8',
        '812a79245856e88c707928e16952ad65_8',
        '812a792458276b4a2eebabba4bb72577_8',
        '812a792458a374b3e4b1dbdcd0604f8a_8',
        '812a792458e8620a08e46d7fd3162b0c_8',
        '812a7924589e2481d09f7f77c9dfecb5_8',
        '812a792458232cee8752a9de59ee5fff_8',
      ],
    };
  },
  methods: {
    changeVid() {
      this.indexNum += 1;
      this.vid = this.dataList[this.indexNum];
    },
  },
};
</script>

<style  lang="scss" scoped>
.course-page {
  width: 100%;
  margin: 20px;
  margin: 0 atuo;
  h4 {
    text-align: center;
  }
  .player-demo {
    display: flex;
    justify-content: space-around;
  }
  .player-content {
    width: 600px;
    height: 300px;
    margin: 0 auto;
    box-sizing: border-box;
    border: 1px dashed #ccc;
    display: flex;
  }
}
</style>
